<!--
// 
// header.vue
// 海石后台管理
// 
// 2024/11/20.
// 
-->
<template>
    <g-flex row justify-content-between align-items-center class="header">
        <div class="open-sidebar" @click="openSidebar">
            <b-icon name="bi-text-indent-left" size="20" />
        </div>
        <div class="center"></div>
        <g-flex row justify-content-end align-items-center>
            <div class="header-button">
                <div class="user-menu">
                    <img v-if="userInfo.sex === 2" :size="30" class="avatar" src="../../assets/user/user__easyico_1.png" />
                    <img v-else :size="30" class="avatar" src="@/assets/user/user__easyico.png" />
                    <span class="nick-name">{{ userInfo.realName || userInfo.nickName }}</span>
                </div>
            </div>
            <div class="header-button" style="margin-left: 10px">
                <el-dropdown trigger="click">
                    <div class="user-menu">
                        <b-icon name="bi-three-dots-vertical" size="16" style="padding: 4px" />
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="updatePasswordClick">
                                <b-icon name="bi-shield-lock" />
                                <span>修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item @click="logout">
                                <b-icon name="bi-power" />
                                <span>退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </g-flex>
        <teleport to="body">
            <UpdatePassword ref="updatePassword" />
        </teleport>
    </g-flex>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import LocalDB from "../../utils/LocalDB";
import UpdatePassword from "@/layouts/pc/components/UpdatePassword.vue";
import GFlex from "@/components/GFlex/GFlex.vue";

const {$fileFullPath} = window;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
// 用户信息
const userInfo = computed(() => store.getters.userInfo);

function openSidebar() {
    store.commit("sidebarCollapsed", false);
}

// 修改密码
const updatePassword = ref()

function updatePasswordClick() {
    console.log("修改密码")
    updatePassword.value.show({
        title: "修改登录密码",
        options: {},
        ok: () => {
            $message.success("修改成功，请重新登录")
            LocalDB.setItem("redirect", window.location.hash.replace("#", ""))
            LocalDB.setItem("token", null);
            setTimeout(() => {
                router.replace("/login")
            }, 300)
        }
    })
}

// 退出
async function logout() {
    const ok = await $confirmSync("退出", "您确定要退出登录么？");
    if (!ok) return
    LocalDB.setItem("redirect", window.location.hash.replace("#", ""))
    LocalDB.setItem("token", null);
    setTimeout(() => {
        router.replace("/login")
    }, 300)
}


onMounted(() => {
    console.log("header onMounted");
})
</script>

<style scoped lang="scss">
.header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 50px;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba($color: #fff, $alpha: 0.1);
    box-shadow: 0 10px 10px rgba($color: #000, $alpha: 0.05);
    backdrop-filter: blur(10px);

    .open-sidebar {
        padding: 6px 10px;
        border-radius: 4px;
        &:active {
            opacity: 0.7;
        }
    }
    .user-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        object-fit: cover;
    }
    .nick-name {
        padding-left: 10px;
    }
}
</style>